        axios.defaults.baseURL = 'http://www.itcbc.com:3006';
        //新增模块
        const form = document.querySelector('#form1')
        const bookname = document.querySelector('.bookname')
        const author = document.querySelector('.author')
        const publisher = document.querySelector('.publisher')
        /* 如果想要快速获取表单中的数据
            1 必须提供form标签
            2 form标签中的 input标签必须要有name属性
            3 利用jq的方法，快速获取 */
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (bookname.value === '') {
                alert('书名不能为空')
                return
            }
            else if (author.value === '') {
                alert('作者不能为空')
                return
            }
            else if (publisher.value === '') {
                alert('出版社不能为空')
                return
            }
            // 使用jq的方法，快速获取表单的数据
            // 序列化 => 快速把数据 转成 字符串的能力
            // 反序列化 => 字符串 => 解析成原本的样子（对象 数组）
            // console.log(a);
            // JSON.stringify({})
            // JSON.parse()// 反序列化
            const data = $('#form1').serialize() + "&appkey=luxingniao"
            axios({
                method: 'post',
                url: '/api/addbook',
                data: data
            }).then(result => {
                bookname.value = ''
                author.value = ''
                publisher.value = ''
                render()
            })
        })
        // 查询模块
        const button = document.querySelector('#btn');
        const inp1 = document.querySelector('#inp1');
        const btn = document.querySelector('#btn1');
    
        btn.addEventListener('click', function () {
            render()
            inp1.value = ''
            bookname.value = ''
            author.value = ''
            publisher.value = ''
        })
        button.addEventListener('click', function () {
            // 获取输入框的值
            const value = inp1.value;

            axios({
                method: 'get',
                url: '/api/getbooks',
                // 参数
                params: {
                    bookname: value,
                    appkey: "luxingniao",
                    // id:43
                    // 书名
                    // bookname:"三国杀",
                    // id:300
                },
            }).then((result) => {
                // console.log('数据请求成功');
                const list = result.data.data;
                const html = list
                    .map(
                        (item) => `
        <tr>
          <td>${item.id}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td> 
            <button class="btn-update" data-id="${value.id}">修改</button>
            <button class="btn-delete" data-id="${value.id}">删除</button>
                </td>
        </tr>
        `
                    )
                    .join('');
                document.querySelector('tbody').innerHTML = html;
            });
        });
        //渲染模块
        function render() {
            axios({
                method: 'GET',
                url: '/api/getbooks',
                params: {
                    appkey: "luxingniao",
                }
            }).then((result) => {
                // console.log(result);
                const list = result.data.data;
                // console.log(list);
                const html = list.map((value) => `
            <tr>
            <td>${value.id}</td>
            <td>${value.bookname}</td>
            <td>${value.author}</td>
            <td>${value.publisher}</td>
            <td>
                <button class="btn-update" data-id="${value.id}">修改</button>
                <button class="btn-delete" data-id="${value.id}">删除</button>
                </td>
            </tr>
             `).join('');
                // console.log(html);
                // 插入 tbody 中
                document.querySelector('tbody').innerHTML = html;
            })
        };//异步，不阻塞
        render()
        //通过事件委托的方式来绑定事件
        //删除模块，，获取编辑表单
        const tbody = document.querySelector('tbody')
        const form3 = document.querySelector('.modal-update form')
        tbody.addEventListener('click', function (e) {
            if (e.target.className === 'btn-delete') {
                const id = e.target.dataset.id
                // console.log('你点击的是删除按钮');
                // const id = e.target.parentNode.parentNode.children[0].innerText;
                axios({
                    method: 'delete',
                    url: '/api/delbook',
                    params: {
                        appkey: "luxingniao",
                        id: id,
                    }
                }).then((result) => {
                    console.log(result)
                    render()
                })
            }
            //
            else if (e.target.className === 'btn-update') {
                // console.log('编辑');
                // document.querySelector()
                document.querySelector('.modal-update').style.display = 'flex';
                const id = e.target.dataset.id;
                axios({
                    method: 'get',
                    url: '/api/getbooks',
                    params: {
                        appkey: 'luxingniao',
                        id,
                    },
                }).then((result) => {
                    console.log(result);
                    // const obj = { bookname: '你好', author: '黑马', publisher: '出版社' };
                    const obj = result.data.data[0];
                    //  属性选择器
                    // document.querySelector('.modal-update [name=id]').value = obj[id];
                    // document.querySelector('.modal-update [name=bookname]').value = obj[bookname];
                    // document.querySelector('.modal-update [name=author]').value = obj[author];
                    // document.querySelector('.modal-update [name=publisher]').value = obj[publisher];
                    for(const key in obj){
                        document.querySelector(`.modal-update [name=${key}]`).value = obj[`${key}`];
                    }
                });
            }
        })
        //绑定修改表单的提交事件
        form3.addEventListener('submit', function (e) {
            e.preventDefault();
            const datastr = $('.modal-update form').serialize();
            axios({
                method: 'put',
                url: '/api/updatebook',
                data: datastr,
            }).then(result => {
                document.querySelector('.modal-update').style.display = 'none';
                render();
            })
        })
        // 表单绑定重置事件(点击的type=reset button就触发)
        form3.addEventListener('reset',function(){
            document.querySelector('.modal-update').style.display = 'none';
        })
        // 添加请求拦截器
